<script setup lang="ts">
import { useCartStore } from '@/stores/CartStorage'

const cartStore = useCartStore()
</script>

<template>
  <div class="cart-container">
    <h1>购物车</h1>
    
    <div v-if="cartStore.items.length === 0" class="empty-cart">
      <p>购物车是空的</p>
    </div>
    
    <div v-else class="cart-content">
      <div class="cart-items">
        <div 
          v-for="item in cartStore.items" 
          :key="item.id" 
          class="cart-item"
        >
          <div class="item-info">
            <h3 class="item-name">{{ item.name }}</h3>
            <p v-if="item.description" class="item-description">{{ item.description }}</p>
          </div>
          
          <div class="item-details">
            <div class="item-price">
              <span class="label">单价:</span>
              <span class="value">¥{{ item.price.toFixed(2) }}</span>
            </div>
            
            <div class="item-quantity">
              <span class="label">数量:</span>
              <span class="value">{{ item.quantity }}</span>
            </div>
            
            <div class="item-subtotal">
              <span class="label">小计:</span>
              <span class="value">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="cart-summary">
        <div class="summary-row">
          <span class="summary-label">商品总数:</span>
          <span class="summary-value">{{ cartStore.cartItemsCount }} 件</span>
        </div>
        <div class="summary-row total">
          <span class="summary-label">总价:</span>
          <span class="summary-value">¥{{ cartStore.totalPrice.toFixed(2) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
